<template>

  <div>
    <div style="height: 150px"></div>
    <div class="avatar_box" align="center">
      <img src="../assets/logo.webp" alt="avatar" />
    </div>
    <van-form @submit="login">
      <van-field
          v-model="student.account"
          name="用户名"
          label="用户名    "
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
          v-model="student.name"
          name="姓名"
          label="姓名"
          placeholder="姓名"
          :rules="[{ required: true, message: '请填写姓名' }]"
      />
      <van-field
          v-model="student.password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
          v-model="student.hometown"
          name="籍贯"
          label="籍贯"
          placeholder="籍贯"
          :rules="[{ required: true, message: '请填写籍贯' }]"
      />
      <van-field
          v-model="student.email"
          name="邮箱"
          label="邮箱"
          placeholder="邮箱"
          :rules="[{ required: true, message: '请填写邮箱' }]"
      />
      <div style="margin:16px;">
        <van-button round block type="info"  native-type="submit">注册</van-button>
      </div>
      <div style="margin: 16px;">
        <van-button round block plain  type="info" @click="goto('/')">登陆</van-button>
      </div>
    </van-form>
  </div>

</template>

<script>
import {doAddStudent,} from "@/api/student";

export default {
  name: "register",
  data() {
    return {
      student:{
        name:"",
        account:"",
        password:"",
        hometown:"",
        email:""
      }
    }
  },
  methods:{
    login(){
      doAddStudent(this.student).then(res=>{
        if (res.code===200){
          this.$message.success("注册成功")
          this.$router.push("/");
        }
      })
    },
    goto(path){
      this.$router.push(path)
    }
  }
}
</script>

<style  lang="less" scoped>
.avatar_box{
  img {
    height: 130px;
    width: 130px;
    border-radius: 50%;
    background-color: #eee;
  }
}
</style>
